<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自定义指令</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!--  
    需求1：定义一个v-big指令，和v-text指令的功能类似，但会把绑定的数值放大100倍
    需求2：定义一个v-fbind指令，和v-bind指令类似，但是会让绑定的input元素默认获取焦点 
-->
    <div id="root">
        <h2>当前的n值是<span v-text="n"></span></h2>


        <!-- 多个单词命名时需要用 —— 连接 -->
        <!-- <h2>放大10倍后的n值是<span v-big-number="n"></span></h2> -->

        <h2>放大10倍后的n值是<span v-big="n"></span></h2>

        <button @click="n++">点我n加1</button>
        <hr>
        <input type="text" v-fbind:value="n">
    </div>
    <script>
        Vue.config.productionTip = false

        //全局自定义指令
        /*  Vue.directive('fbind', {
             //指令与所在元素绑定时调用
             bind(element, binding) {
                 element.value = binding.value;
             },
             //指令所在元素被插入页面时
             inserted(element, binding) {
                 element.focus();
             },
             //指令所在的模板被重新解析时
             update(element, binding) {
                 element.value = binding.value;
             }
 
         }) */






        var vm = new Vue({
            el: '#root',
            data: {
                n: 1
            },
            //用于配置自定义指令
            directives: {
                //写在vue实例里面的自定义指令只能在当前实例使用，要写全局自定义指令可以使用 vue.derective() 形式   和过滤器类似


                // 注意:自定义函数里的this是指向的window


                //big指令何时会被调用？
                //1.指令与元素成功绑定时（一上来）
                //2.指令所在的模板被成功解析时

                // 多个单词的方法声明需要加上''
                /* 'big-number'(element, binding) {
                    element.innerText = binding.value * 10;
                }, */
                big(element, binding) {
                    element.innerText = binding.value * 10;
                },


                //此时写成函数形式会出现问题，页面还没渲染到浏览器就执行focus会没有效果，因为指令与元素一绑定就调用
                /* fbind(element, binding) {
                    element.value = binding.value;
                    element.focus();
                } */
                fbind: {
                    //指令与所在元素绑定时调用
                    bind(element, binding) {
                        element.value = binding.value;
                    },
                    //指令所在元素被插入页面时
                    inserted(element, binding) {
                        element.focus();
                    },
                    //指令所在的模板被重新解析时
                    update(element, binding) {
                        element.value = binding.value;
                    }

                }
            }
        });
    </script>
</body>

</html>